<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>评价商品</title>
	<meta name="keywords" content="知果汇" />
	<meta name="description" content="知果汇" />
	<link rel="SHORTCUT ICON" href="_IMG_/favicon.ico" />
	<style type="text/css">
		html,body{width: 560px;height: 380px;margin: 0;padding: 0;}
		p{margin: 0;}
		.fl{float: left;}
		form{width: 520px;padding: 20px;}
		.formItem{overflow: hidden;}
		.formItem label{font-size: 14px;color: #333333;}
		.products{overflow: hidden;width: 470px;}
		.products img{width: 120px;height: 120px;float: left;}
		.products p{width: 340px;display: inline-block;float: left;padding-left: 10px;margin-bottom: 15px;}
		.productName{font-size: 14px;color: #333333;}
		.greyTag{color: #999999;font-size: 12px;width: 70px;display: inline-block;}
		.types,.services{font-size: 11px;color: #333333;}
		.prices{font-size: 14px;color: #FF4900;}
		.mt10{margin-top: 10px;}
		.Type{border: 1px solid #E5E5E5;border-bottom: 0;width: 448px;height: 40px;line-height: 40px;}
		.TypeItem{text-decoration: none;color: #333333;margin-left: 15px;}
		.TypeItem input[type="radio"]{margin: 0;}
		.text_area {position: relative;width: 450px;}
		.commentsFill{width: 418px;padding: 15px 15px 35px 15px;height: 100px;border:1px solid #E5E5E5;
			font-size: 14px;color: #999999;resize: none;overflow-x:auto;overflow-y:hidden;}
		#titlelen {position: absolute;right: 15px;bottom: 10px;}
		#titlelen{font-size: 14px;}
		.uploadImg{padding: 15px;border: 1px solid #E5E5E5;border-top: 0;
			width: 418px;margin-top: -4px;overflow: hidden;}

		.upload-list{float: left;display: inline-block;/*width: 590px;*/}
		.upload-btn {width: 50px;height: 50px;margin: 0;border: 1px solid #e5e5e5;}
		.upload-img{width:50px;height: 50px;position: relative;float: left;margin-right: 25px;margin-bottom: 16px;}
		.upload-btn img{display: block;width: 50px;height: 50px;}
		.upload-btn input{position: absolute;top: 0;margin: 0;width: 50px;height: 50px;border: none;opacity: 0; filter: alpha(opacity=0);cursor: pointer}
		.upload-img p {width: 50px;font-size: 10px;line-height: 16px; margin-top: -35px;text-align: center;}
		.img-info img{width: 50px;height: 50px;}
		.file-panel {position: absolute;display: none;width: 50px;height: 50px;top: 0;overflow: hidden;z-index: 300;}
		.del_cancel {width: 50px;height: 50px;background-color: rgba( 0, 0, 0, 0.5 );}
		.del_cancel a{background:url(/static/web/images/del.png) no-repeat;background-size: 100% 100%;}
		.table-btn{display:block;width:10px;height:10px;margin-left:38px;padding-top:2px;text-align:center;}

		.anony{display: inline-block;margin-top: 5px;text-decoration: none;font-size: 14px;color: #333333;}
		.anony input{vertical-align: bottom;}
	</style>
</head>
<body>
<form action="" method="post">
	<div class="formItem">
		<div class="products" name="products">
			<img src="_IMG_/7.png" alt=""/>
			<p class="productName"></p>
			<p class="pricesNum"><span class="greyTag">价格</span><span class="prices">￥0.00</span></p>
			<p class="types"><span class="greyTag">类型</span><span class="productType">服务类商品</span></p>
			<p class="services"><span class="greyTag">服务分类</span><span class="serviceType"></span></p>
		</div>
	</div>
	<div class="formItem mt10">
		<div class="Type" num="1">
			<a class="TypeItem" href="javascript:;" >
				<input type="radio" name="type" checked="checked" value="1">
				<span class="high">好评</span>
			</a>
			<a class="TypeItem" href="javascript:;">
				<input type="radio" name="type" value="2">
				<span class="medium">中评</span>
			</a>
			<a class="TypeItem" href="javascript:;">
				<input type="radio" name="type" value="3">
				<span class="low">差评</span>
			</a>
		</div>
		<div class="text_area">
			<textarea class="commentsFill" style="overflow:scroll; overflow-x:hidden; height:80px; " id="news_title" name="news_title" maxlength="300" placeholder="写下您的评论..." onkeyup="title_len();" onclick="title_len();"></textarea>
			<span id="titlelen">0/300</span>
		</div>
		<div class="uploadImg">
			<div class="upload-list">
				<div class="upload-img">
					<div class="upload-btn">
						<img src="_IMG_/addImg.png">
						<input type="file" name="upfile[]" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png">
					</div>
				</div>
				<div class="upload-img">
					<div class="upload-btn">
						<img src="_IMG_/addImg.png">
						<input type="file" name="upfile[]" id="file1" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png">
					</div>
				</div>
				<div class="upload-img mr0">
					<div class="upload-btn">
						<img src="_IMG_/addImg.png">
						<input type="file" name="upfile[]" id="file2" onchange="previewImage(this,2)" accept="image/gif, image/jpeg, image/png">
					</div>
				</div>
			</div>
		</div>
		<a class="anony" href="javascript:;"><input type="checkbox" name="is_an"/>匿名评价</a>
		<input type="hidden" name="shop_name" id="shop_name" />
		<input type="hidden" name="order"  id="order" value=""/>
		<input type="hidden" name="shop_id" id="shop_id" />
		<input type="hidden" name="user_id" id="user_id" />
		<input type="hidden" name="seller_id" id="seller_id" />
	</div>
</form>
</body>
<script src="_JS_/jquery-1.8.3.min.js"></script>
<script src="_JS_/jquery.base64.js"></script>
<script src="_JS_/jquery.cookie.js"></script>
<script src="_JS_/common.js"></script>
<script type="text/javascript">
	var url = window.location.href;
	var show=url.split("&");
	var id = show[0].split("=")[1];
	var type = show[1].split("=")[1];
	$.ajax({
		type: "get",
		url: "/index.php/api/form/order_details",
		data: {
			'id': id,
			'type': type
		},
		dataType: 'jsonp',
		success: function (msg) {
			if (msg.code == 200) {
				$('.products').find('img').attr('src','/Images/serviceGoods/'+msg.data.image);
				$('.productName').html(msg.data.username);
				$('.prices').html('￥'+msg.data.store);
				$('.serviceType').html(msg.data.trading_name);
				$('.formItem').attr('num',msg.data.id);
				$('#shop_name').val(msg.data.name);
				$('#order').val(msg.data.id);
			}
			if (msg.code == 1000) {
				layer.msg('查询失败！', {icon: 5});
			}
		}
	});
	$('input[type="radio"]').on('change',function(){
		$(this).parents('.Type').attr('num',$(this).val());
	});
	//限制上传文件的类型和大小
	function previewImage(obj,num){
		var filepath=$(obj).val();
		fileObj = document.getElementById('file'+num);
		value = window.URL.createObjectURL(fileObj.files[0]);
		file_size = obj.files[0].size;
		size = file_size / 1024;
		if (size > 1024*5) {
			$('#file'+num).val("");
			layer.alert('上传图片不得大于5MB', {
				closeBtn: 0
			});
		} else {
			$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
			$(obj).parent(".upload-btn").hide();
			$(obj).parents(".upload-img").children('p').hide();

			$('.img-info').hover(function(){
				$(this).find(".file-panel").show();
			},function(){
				$(this).find(".file-panel").hide();

			});
			$(".del_cancel a").on("click",function(){
				$('#file'+num).val("");
				$(this).parents('.upload-img').find(".upload-btn").show();
				$(this).parents('.upload-img').find(".upload-img p").show();
				$(this).parents(".img-info").remove();

			});
		}
	}
</script>
</html>
